<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
  事件修饰符·事件偷懒符?
Vue 为 v-on 提供了事件修饰符。修饰符是用 .表示的指令后缀，包含以下这些
.stop
.prevent
.self
.capture
.once
.passive


.passive修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

TIP:
请勿同时使用.passive和.prevent，因为.passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则.prevent 会被忽略，并且浏览器会抛出警告。

事件修饰符可以组合使用，采用链式写法 .stop.prevent.self


按键修饰符
Vue 为一些常用的按键提供了别名:
.enter
.tab
.delete (捕获“Delete"和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

 -->

    <div id="app">
        <!-- .stop阻止冒泡 -->
        <ul @click="handleUlClick">
            <li @click.stop="handleClick1()">11111</li>

        </ul>
        <!-- .self只阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为 -->
        <ul @click.self="handleUlClick">

            <li @click="handleClick2()">22222</li>

        </ul>

        <!-- .prevent 阻止默认行为 -->
        <form action="" @submit.prevent="handleSubmit">
            <button type="submit">提交</button>
        </form>
        <!-- .once 只绑定一次事件 -->
        <button @click.once="handleStar">抽奖</button>
        <!-- 如果不用once,也可以这样写： -->
        <button @click="isOnce && handleStar2()">抽奖2</button>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    count: 0,
                    isOnce: true
                }
            },
            methods: {

                handleClick1() {
                    console.log(111);

                },

                handleClick2() {
                    console.log(22222);
                },

                handleUlClick() {
                    console.log('ul被点击了');
                },
                handleSubmit() {
                    console.log(11111);
                },
                handleStar() {
                    console.log('抽奖');
                },
                handleStar2() {
                    console.log('抽奖2');
                    this.isOnce = false
                }
            }
        }
        var app = Vue.createApp(obj).mount('#app')
    </script>
</body>

</html>